<template>
  <div style="width: 100%;">
    <div class="header" style="width: 100%;background-color: white">
      <el-page-header @back="goBack" content="完工结算"> </el-page-header>
      <el-divider></el-divider>
    </div>

    <div style="width: 90%;margin: 0 auto">
      <div style="width: 100%;">
        <span style="font-weight: 700;font-size: 20px">基本信息</span>
      </div>
      <el-divider></el-divider>
      <el-form style="width: 100%;" label-width="100px">
        <el-container>
          <el-col :span="6">
            <el-form-item label="日期: ">
              <el-input v-model="settleForm.applyDate" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结算编号: ">
              <el-input v-model="settleForm.id" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结算名称: ">
              <el-input v-model="settleForm.settleName"></el-input>
            </el-form-item>
          </el-col>
        </el-container>
        <el-container>
          <el-col :span="12">
            <el-form-item label="所属项目: ">
              <el-input v-model="settleForm.projectName"
                ><i
                  slot="suffix"
                  @click="projectDialogVisible = true"
                  class="el-input__icon el-icon-search"
                ></i
              ></el-input>
              <el-input v-model="settleForm.pid" v-show="false"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同名称: ">
              <el-input v-model="settleForm.contractName" >
                <!-- <i slot="suffix" @click="contractDialogVisible = true" class="el-input__icon el-icon-search"></i> -->
              </el-input>
              <el-input v-model="settleForm.ctrId" v-show="false"></el-input>
            </el-form-item>
          </el-col>
        </el-container>
        <el-container>
          <el-col :span="6">
            <el-form-item label="合同金额: ">
              <el-input
                v-model="settleForm.contractAmount"
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="甲方单位: ">
              <el-input v-model="settleForm.companyName" readonly >
                <!-- <i slot="suffix" @click="companyDialogVisible = true" class="el-input__icon el-icon-search"></i> -->
                </el-input>
              <el-input v-model="settleForm.companyId" v-show="false"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="罚款: ">
              <el-input v-model="settleForm.penalty"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="扣款: ">
              <el-input v-model="settleForm.withhold"></el-input>
            </el-form-item>
          </el-col>
        </el-container>
        <el-container>
          <el-col :span="6">
            <el-form-item label="结算金额: ">
              <el-input v-model="settleForm.agreeAmount" @blur="handleAmount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="金额(大写): ">
              <el-input v-model="settleForm.agreeUpper"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="经办人: ">
              <el-input v-model="settleForm.handlerId" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-container>
        
        <el-container>
          <el-col :span="24">
            <el-form-item label="结算说明: ">
              <el-input v-model="settleForm.settleComment" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-container>
      </el-form>
    </div>

    <multi-file-upload
      style="width: 90%;margin: 20px auto"
      title="附件"
      action="http://localhost/uploads"
      :params="{ folder: 'settleForm' }"
      :headers="{ token: token }"
      :show-button="!checkRoute"
      @uploadSuccess="handleUploadSuccess"
      :parent-file-list="fileList"
    ></multi-file-upload>

    <div style="width: 90%;margin: 30px auto">
      <div style="width: 100%;">
        <div style="font-weight: 700;font-size: 20px;display: flex">
          <div>工程量清单</div>
          <div style="margin-left: 30px">
            <el-button v-if="!checkRoute" size="mini" type="primary" @click="handleAddRow">增行</el-button>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <el-table :data="settleDetails">
        <el-table-column label="序号" type="index" align="center"></el-table-column>
        <el-table-column label="清单子目" prop="workContent" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.workContent"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="单位" prop="unit" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.unit"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="合同数量" prop="workCount" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.workCount" @change="handleEdit(scope.$index, scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="合同单价" prop="unitPrice" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.unitPrice" @change="handleEdit(scope.$index, scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="实际完成数量" prop="snumber" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.snumber" @change="handleEdit(scope.$index, scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="实际执行价" prop="hnumber" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.hnumber" @change="handleEdit(scope.$index, scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="结算价款" prop="sumnumber" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sumnumber" @change="handleEdit2(scope.$index, scope.row)"
              @blur="handleEdit2(scope.$index, scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="comment" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.comment"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button v-if="!checkRoute" type="danger" @click="handleRemoveRow(scope.row)" >删行</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <label for="" style="display: inline-block; width: 50px">合计: </label>
        <el-input style="width: 200px" v-model="input1"></el-input>
        <label for="" style="display: inline-block; width: 90px; margin-left: 30px; ">金额大写:</label>
        <el-input style="width: 350px" v-model="input2"></el-input>
      </div>
    </div>
    <el-divider></el-divider>
    <div style="width: 100%;margin-left: 90px">
      <el-button type="primary" @click="handleSubmit" v-if="!checkRoute">确认提交</el-button >
    </div>

    <el-dialog title="项目选择" :visible.sync="projectDialogVisible" width="70%">
      <project-info-list @row="handleSetProject" v-if="projectDialogVisible" ></project-info-list>
    </el-dialog>

  </div>
</template>

<script>
import { DateUtil } from "../../../model/common/DateUtil";
import { AttachemenInfoService } from "../../../model/gs/AttachemenInfoService";
import { HandleNumFormat } from "../../../model/sy/HandleNumFormat.js";
import { IncomeContractService } from "../../../model/sy/IncomeContractService.js";

import { ComplementSettlementService } from '../../../model/sy/ComplementSettlementService.js'
import { ComplementSettlementListService } from '../../../model/sy/ComplementSettlementListService.js'
const complementSettlementListService = ComplementSettlementListService.getInstance()

const ProjectInfoList = () =>
  import("../../common/projectInfo/ProjectInfoList.vue");
// const TenderCompanyList = () => import("./TenderCompanyList.vue");
const attachemenInfoService = AttachemenInfoService.getInstance();
const incomeContractService = IncomeContractService.getInstance();

const complementSettlementService = ComplementSettlementService.getInstance()

export default {
  data() {
    return {
      progressFlag: false,
      progressPercent: 10,
      settleForm: {
        id: "",
        applyDate: DateUtil.today(),
        handlerId: sessionStorage.getItem("realName"),
        contractName: '',
        ctrId: '',
        contractAmount: '',
        companyName: '',
        companyId: '',
        agreeUpper: '',
      },
      projectDialogVisible: false,
      companyDialogVisible: false,
      companyDialogVisible2: false,
      fileList: [],
      settleDetails: [],
      currentIndex: "",
      input1: "",
      input2: "",
    };
  },
  methods: {
    selectOne(id) {
      complementSettlementService.selectOne(id).then((response) => {
        if (response.data.code === 0) {
          this.settleForm = response.data.data;
        }
      });
    },
    selectList(id) {
      complementSettlementListService.selectList(id).then((response) => {
        if (response.data.code === 0) {
          this.settleDetails = response.data.data;
        }
      });
    },
    handleEdit(index, row) {
      // if (row.workCount && row.unitPrice) {
      //   row.sumPrice = Number(row.workCount) * Number(row.unitPrice);
      // }
      if (row.hnumber && row.snumber){
        row.sumnumber = Number(row.hnumber) * Number(row.snumber)
      }
    },
    handleEdit2() {
      // 循环给合计赋值
      const val = this.settleDetails.reduce(
        (prev, curr) => Number(prev) + Number(curr.sumnumber),
        0
      );
      this.input1 = HandleNumFormat.numFormat(val);
      this.input2 = HandleNumFormat.handleAmountUpper(
        parseFloat(val).toFixed(2)
      );
    },
    handleAmount(value) {
      // this.settleForm.contractAmount = value.target.value;
      this.settleForm.agreeUpper = HandleNumFormat.handleAmountUpper(
        parseFloat(value.target.value).toFixed(2)
      );
    },
    getFileList(id) {
      attachemenInfoService.getById(id).then((response) => {
        if (response.data.code === 0) {
          response.data.data.forEach((item) => {
            this.fileList.push({
              fileName: item.fileName,
              uploadPerson: this.settleForm.handlerId,
              uploadDate: item.uploadDate,
              filePath: item.filePath,
            });
          });
        }
      });
    },
    handleUploadSuccess(ids) {
      this.settleForm.attachIds = ids;
    },
    getMaxId() {
      complementSettlementService.getMaxId().then((response) => {
        if (response.data.code === 0) {
          this.settleForm.id = response.data.data;
        }
      });
    },
    handleSetProject(row) {
      this.settleForm.pid = row.id;
      this.settleForm.projectName = row.projectName;
      this.projectDialogVisible = false;

      incomeContractService.selectByPid(row.id).then(response=>{
        if (response.data.code === 0) {
          this.settleForm.contractName = response.data.data.contractName;
          this.settleForm.ctrId = response.data.data.id;
          this.settleForm.contractAmount = response.data.data.contractAmount;
          this.settleForm.companyName = response.data.data.partyA;
          this.settleForm.companyId = response.data.data.custId;
        }
      })
    },
    // handleSetCompany(row) {
    //   this.settleForm.companyId = row.id;
    //   this.settleForm.companyName = row.partyA;
    //   this.companyDialogVisible = false;
    // },
    handleAddRow() {
      this.settleDetails.push({
        workContent: "",
        unit: "",
        workCount: "",
        unitPrice: "",
        sumnumber: "",
        snumber: "",
        hnumber: "",
        comment: "",
        settleId: this.settleForm.id,
      });
    },
    handleSubmit() {
      complementSettlementService
        .save(this.settleForm, this.settleDetails)
        .then((response) => {
          if (response.data.code === 0) {
            this.$message.success({
              message: "保存成功",
              duration: 1000,
            });
            this.$router.push({
              path: "/ComplementSettlementList",
            });
          }
        });
    },
    handleRemoveRow(row) {
      this.settleDetails.splice(row.index, 1);
      this.handleEdit2();
    },
    goBack() {
      history.back();
    },
  },
  computed: {
    token: {
      get() {
        return this.$store.state.token;
      },
    },
    checkRoute() {
      return Object.keys(this.$route.params).length != 0;
    },
  },
  created() {
    if (Object.keys(this.$route.params).length == 0) {
      this.getMaxId();
    } else {
      const row = this.$route.params.row;
      this.selectOne(row.id);
      this.selectList(row.id);
      this.getFileList(row.attachemenIds);
      const timer = setInterval(() => {
        if (this.settleDetails.length != 0) {
          this.handleEdit2();
          clearInterval(timer);
        }
      }, 20);
    }
  },
  components: {
    ProjectInfoList,
    // TenderCompanyList,
  },
};
</script>

<style scoped>
/* .el-input__inner {
  width: 280px;
} */
.el-input__icon {
  cursor: pointer;
}
</style>
